<template>
  <div id='main'>
    <div class='top'>
        <div class='message'>
            <img src='/static/user/icon_er.png'>
            <img src='/static/user/user_message_icon.png'>
        </div>
        <div class='person_msg'>
            <div class='person_msgl'>
               <li><img src='/static/user/bg_head_new_light.png'></li>
               <div class='msgl_r'>
                 <p  v-for="list in userlists" :key="list.id" class='msgl_rn ff'>{{list.username}}
                     <img src='/static/user/vip_icon_gray.png'>
                 </p>
                 <p  v-for="list in userlists" :key="list.id" class='msgl_rt ff'>{{list.usernum}}
                     <img src='/static/user/icon_edit.png'>
                 </P>
              </div>
            </div>
            <div class='person_msgr'>
                <li>
                </li>
            </div>
        </div>
    </div> 
    <!-- 我的钱包 -->
    <div class='person_info'>
            <li class='one'>
                <div class='f1'>
                <img src='/static/user/icon_packet.png'>
                <br>
                <span>我的钱包</span>
                </div>
            </li>
             <li>
                <p class='dis_d' v-for="list in userlists" :key="list.id">{{list.nums}}</p>
                <span>我的关注</span>
            </li>
             <li>
                <p class='dis_d' v-for="list in userlists" :key="list.id">{{list.numd}}</p>
                <span>鲜豆</span>
            </li>
            <li>
                <p class='dis_d' v-for="list in userlists" :key="list.id">{{list.numc}}</p>
                <span>白条</span>
            </li>
    </div>
    <div class='myinfo'>
        <div class='pro_img'>
            <img src='/static/user/pro_img.png'>
        </div>
        <div class='pro_list'>
          <li>
            <img src='/static/user/1.png'>
            <p>我的关注</p>
          </li>
          <li>
             <img src='/static/user/2.png'>
            <p>我的评价</p>
          </li>
          <li>
             <img src='/static/user/3.png'>
             <p>我的地址</p>
         </li>  
         <li>
             <img src='/static/user/4.png'>
            <p>会员减运费</p>
         </li>
         </div>
        <div class='pro_help'>
          <li>
             <img src='/static/user/5.png'>
            <p>签到有惊喜</p>
          </li>
          <li>
             <img src='/static/user/6.png'>
            <p>退款/售后</p>
          </li>
          <li>
             <img src='/static/user/7.png'>
            <p>客服反馈</p>
          </li>
          <li>
             <img src='/static/user/8.png'>
            <p>帮助中心</p>
          </li>
        </div> 
        <div class='pro_about'>
          <li>
             <img src='/static/user/9.png'>
            <p>办公室超市</p>
          </li>
          <li>
             <img src='/static/user/10.png'>
            <p>配送员注册</p>
          </li>
          <li>
             <img src='/static/user/11.png'>
            <p>关注我们</p>
          </li>
        </div>  
    </div>
    <div class="foot">
        <p>退出账号</p>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
export default {
    data(){
        return{
            userlists:[],
        }
    },
    methods: {
    getUserList() {
      $.get(this.apiurl + "/user/list").done(result => {
        this.userlists = result.data;
      });
     },
    },
    created(){
      this.getUserList();  
    }
};
</script>
<style scoped>
/* top */
#main{
    width:100%;
}
.message {
  display: flex;
  justify-content: flex-end;
  width: 96%;
  margin: -0.5rem auto;
  padding-bottom: 0.9rem;
}
.message > img {
  width: 1.275rem;
  height: 1.275rem;
}
.message > img:nth-child(1) {
  margin-right: 1rem;
}
.top {
  background:  url(/static/user/my_bgnew.png) center bottom no-repeat;
  background-size:cover;
  padding:1.25rem 0;
}
.person_msg{
    position:relative;
    display:flex;
    width:100%;
    justify-content: space-around;
}
.person_msgl{
    width:84%;
    display: flex;
    justify-content: space-around;
    margin-top: -1rem;
}
.msgl_r{
    width:65%;
    padding-left:0.8rem;
}
.person_msgl>li{
    width:35%;
}
.person_msgl>li>img{
    width:80%;
    margin-left:1rem;
}
.person_msgr{
    width:50%;
    position: relative;
}
.person_msgr>li{
    position:absolute;
    right:0;
    bottom:-1.1rem;
    background-size:cover;
    animation:mymove 3s 0.01s ease-in-out infinite;
    animation-direction:alternate;
    width:6.375rem;
    height: 4rem;
}
    @keyframes mymove {
        from{
            background: url(/static/user/vip_centernew@2x.png) 0rem 0.4rem no-repeat;
            background-size:cover;
        }
        to{
            background: url(/static/user/vip_centernew@2x.png) 0rem 0.8rem no-repeat;
            background-size:cover;
        }
    }
.person_msgr>li>img{
    width:100%;
}
.ff{
    color:white;
    font-size:0.96rem;
    line-height: 0.72rem;
    position:relative
}
.msgl_rn{
    font-size:0.88rem;
}
.msgl_rn>img{
    width:1rem;
    height:0.88rem;
}
.msgl_rt>img{
    width:1rem;
    height:1rem;
}
.msgl_rn>img,.msgl_rt>img{
    position:absolute;
    bottom:0;
    margin-left:0.4rem;
}
/* 我的钱包 */
.person_info{
    width:96%;
    display: flex;
    justify-content: space-between;
    margin:1rem auto;
}
.person_info>li{
    text-align: center;
    margin:auto;
}
.f1>img{
    width:1.56rem;
    height:1.56rem;
    padding:0.1rem;
}
.person_info>li>span,.f1>span{
    display: block;
    font-size:0.75rem;
    color:#323232;
}
.dis_d{
    font-size:0.875rem;
    color:#323232;
    line-height: 0.4rem;
}
.one:after{
   background:#f4f4f4  url(/static/user/packet-right-border@2x.png) no-repeat center center;
   width:0.1rem;
   content:'';
   height:3rem;
   display: inline-block;
   position:absolute;
   right:-1rem;
   top:0;
   background-color: #f4f4f4;
}
.one{
    position:relative;
}
/* info开始 */
.myinfo{
    width:100%;
    background: #f4f4f4;
    padding-top:0.5rem;
    padding-bottom:0.1rem;
    font-size:0.81rem;
    color:#323232;
    line-height: 0.88rem;
}
.pro_img,.pro_help,.pro_about{
    width:100%;
    background: #fff;
}
.pro_img>img{
    width:96%;
    margin:auto;
}
.pro_list,.pro_help,.pro_about{
    width:100%;
    display: flex;
    justify-content: space-between;
    background: #fff;
}
.pro_list>li,.pro_help>li,.pro_about>li{
    width:25%;
    text-align: center;
}
.pro_list>li>img,.pro_help>li>img,.pro_about>li>img{
    width:56%;
}
.pro_about{
     justify-content: flex-start;
}
.pro_help{
    border-bottom: 0.1rem #f4f4f4 solid;
    border-top: 0.1rem #f4f4f4 solid;
}
.foot{
    background-color: #f4f4f4;
    padding:0 0 0.2rem;
}
.foot>p{
    font-size:1rem;
    color:#ff5757;
    text-align:center;
    line-height: 3rem;
    background-color: #fff;
}
</style>